<template>
  <div class="mainControl">
    <VonCrumbs title="人员管理"></VonCrumbs>
    <div class="widget">
      <VonInput v-model="searchCondition" width="260px" placeholder="搜索人员" @change="getUsers">
      </VonInput>
      <el-button type="primary" size="small" @click="add" class="addButton">
        添加
      </el-button>
    </div>
    <div class="tableContent">
      <VonTable :column="column" :tableData="tableData">
        <template slot="num">
          <el-table-column label="序号" align="center" width="100px">
            <template slot-scope="scope">
              {{scope.$index+1}}
            </template>
          </el-table-column>
        </template>
        <template slot="operation">
          <el-table-column align="center" label="操作" width="200">
            <template slot-scope="scope">
              <template v-if="scope.row.userName!='admin'">
                <el-button type="text" size="small" @click="edit(scope.row)" style="color: #1890ff">
                  编辑
                </el-button>
                <el-button type="text" size="small" @click="del(scope.row)" style="color: #1890ff">
                  删除
                </el-button>
              </template>
            </template>
          </el-table-column>
        </template>
      </VonTable>
    </div>
    <VonDialog :title="type==1?'新增':'编辑'" @cancelResult="cancelResult" @commitResult='commitResult' :isShow_Popup="isShow_Popup">
      <div class="deviceForm" slot="content">
        <el-form ref="form" :model="form" label-width="48px">
          <el-form-item>
            <VonSelect v-model="form.position" label="职位" width="460px" :options="positionList"></VonSelect>
          </el-form-item>
          <el-form-item>
            <VonInput v-model="form.userName" label="用户名" width="460px"></VonInput>
          </el-form-item>
          <el-form-item v-if="type==1">
            <VonInput v-model=" form.password" label="密码" width="460px" show-password>
            </VonInput>
          </el-form-item>
          <el-form-item>
            <VonInput v-model="form.surname" label="工号" width="460px"></VonInput>
          </el-form-item>
          <el-form-item v-if="form.position == 'operator'">
            <VonSelect v-model="form.deviceIds" :options="deviceOptions" label="选择工站" width="460px" :isMultiple="true">
            </VonSelect>
          </el-form-item>
          <template v-if="form.position == 'engineer'">
            <el-form-item>
              <p class="PersonnelManage">授权</p>
              <div class="grantItem">
                <el-checkbox-group v-model="searchRole" class="checkList">
                  <el-checkbox label="Central.Search">数据管理</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-form-item>
            <!--            <el-form-item>-->
            <!--              <template>-->
            <!--                <el-checkbox-group v-model="exportRole" class="checkList">-->
            <!--                  <el-checkbox label="Export">数据下载</el-checkbox>-->
            <!--                </el-checkbox-group>-->
            <!--              </template>-->
            <!--            </el-form-item>-->
            <el-form-item>
              <div class="grantItem">
                <el-checkbox-group v-model="editRecipeRole" class="checkList">
                  <el-checkbox label="Central.Recipe">配方管理</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-form-item>
            <el-form-item>
              <div class="grantItem">
                <el-checkbox-group v-model="sopRole" class="checkList">
                  <el-checkbox label="Central.Sopupdate">设备管理</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-form-item>
          </template>
        </el-form>
      </div>
    </VonDialog>
  </div>
</template>
<script>
import {
  getUserPageList,
  createUser,
  updateUser,
  deleteUser,
  getDeviceOptions,
  getUserDevice,
  getPermissions
} from "../../api/workStation/mainControl";
import { openLoading, closeLoading } from "../../common/prompt";

export default {
  name: "PersonnelManage",
  data() {
    return {
      searchCondition: "",
      tableData: [],
      pageIndex: 1,
      pageSize: 20,
      type: 0,
      form: {},
      deviceOptions: [],
      searchRole: [],
      exportRole: [],
      editRecipeRole: [],
      sopRole: [],
      isShow_Popup: false,
      positionList: [
        {
          name: "工程师",
          id: "engineer"
        },
        {
          name: "操作员",
          id: "operator"
        },
        {
          name: "管理员",
          id: "admin"
        }
      ],
      column: [
        {
          align: "center",
          label: "职位",
          prop: "positionName"
        },
        {
          align: "center",
          label: "用户名",
          prop: "userName"
        },
        {
          align: "center",
          label: "工号",
          prop: "surname"
        }
      ]
    };
  },
  created() {
    this.init();
    this.getUsers();
  },
  methods: {
    init() {
      getDeviceOptions().then(res => {
        this.deviceOptions = res.data;
      });
    },
    getUsers() {
      const params = {
        filter: this.searchCondition,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      };
      openLoading();
      getUserPageList(params).then(res => {
        closeLoading();
        if (res.status == 200) {
          this.tableData = res.data.items;
          this.tableData.map(t => {
            t.positionName =
              t.extraProperties.Position == "operator"
                ? "操作员"
                : t.extraProperties.Position == "engineer"
                  ? "工程师"
                  : "管理员";
            t.position = t.extraProperties.Position;
          });
        } else {
          this.$message.error(res.error.message);
        }
      });
    },
    commitResult() {
      if (!this.form.position) {
        this.$message.error("请选择职位");
        return;
      }
      if (!this.form.userName) {
        this.$message.error("请填写用户名");
        return;
      }
      if (!this.form.password && this.type == 1) {
        this.$message.error("请填写密码");
        return;
      }
      if (!this.form.surname) {
        this.$message.error("请填写工号");
        return;
      }
      this.form.isActive = true;
      this.form.lockoutEnabled = false;
      this.form.roleNames = [this.form.position];
      this.form.extraProperties = {
        Position: this.form.position
      };
      this.form.name = this.form.userName;
      this.form.email = this.form.userName + "@example.com";
      this.form.updatePermissionsDto = {
        permissions: []
      };
      if (this.searchRole.length > 0) {
        this.form.updatePermissionsDto.permissions.push({
          name: this.searchRole[0],
          isGranted: true
        });
      }
      if (this.editRecipeRole.length > 0) {
        this.form.updatePermissionsDto.permissions.push({
          name: this.editRecipeRole[0],
          isGranted: true
        });
      }
      if (this.sopRole.length > 0) {
        this.form.updatePermissionsDto.permissions.push({
          name: this.sopRole[0],
          isGranted: true
        });
      }
      openLoading("处理中...");
      if (this.type == 1) {
        createUser(this.form).then(res => {
          this.isShow_Popup = false;
          if (res.status == 200 || res.status == 204) {
            this.$message.success("新增成功");
            this.getUsers();
          } else {
            this.$message.error("添加失败");
          }
        });
      } else {
        this.form.password = null;
        const data = {
          deviceIds: this.form.deviceIds,
          updatePermissionsDto: this.form.updatePermissionsDto,
          userId: this.form.id,
          userInfo: this.form
        };
        updateUser(data).then(res => {
          this.isShow_Popup = false;
          if (res.status == 200 || res.status == 204) {
            this.$message.success("修改成功");
            this.getUsers();
          } else {
            this.$message.error("添加失败");
          }
        });
      }
    },
    cancelResult() {
      this.isShow_Popup = false;
    },
    add() {
      this.form = {};
      this.type = 1;
      this.isShow_Popup = true;
    },
    edit(row) {
      this.form = {
        ...row,
        deviceIds: []
      };
      getUserDevice(this.form.id).then(res => {
        this.form.deviceIds = res.data;
        this.type = 2;
        this.isShow_Popup = true;
      });
      getPermissions({ providerName: "U", providerKey: this.form.id }).then(
        res => {
          res.data.grants.forEach(g => {
            if (g == "Central.Recipe") {
              this.editRecipeRole = [g];
            }
            if (g == "Central.Search") {
              this.searchRole = [g];
            }
            if (g == "Central.Sopupdate") {
              this.sopRole = [g];
            }
          });
        }
      );
    },
    del(row) {
      this.$confirm("是否确认操作？").then(() => {
        let data = {
          id: row.id
        };
        deleteUser(data).then(res => {
          this.isShow_Popup = false;
          if (res.status == 200 || res.status == 204) {
            this.$message.success("删除成功");
            this.getUsers();
          } else {
            this.$message.error("删除失败");
          }
        });
      });
    }
  }
};
</script>

<style scoped lang="scss">
@import "../../style/mainControl";

.deviceForm {
  .PersonnelManage {
    color: white;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
  }

  .grantItem {
    height: 30px;
    background: rgba(0, 0, 0, 0.2);
    line-height: 30px;
    width: 92%;
    padding-left: 12px;
    color: white;
  }
}

.PersonnelManage {
  color: #fff;
  margin-bottom: 0px;
}

/deep/.checkList {
  margin: 10px 30px 0;

  .el-checkbox {
    color: white;

    .el-checkbox__input {
      display: inline-block;
    }
  }
}
</style>